<template>
	<view class="filter-model">
		<view class="model-content"
			:style="{ width: showSelect ? ' calc(100% - 40rpx)' : '100%', padding: showSelect ? '0 20rpx' : '0', paddingBottom: showSelect ? '20rpx' : '10rpx' }"
			@click="showFuc">
			<view class="model-content-title" v-if="showSelect">
				筛选
				<image v-if="!disabled" :style="{ transform: showFilter ? ' rotate(180deg)' : ' rotate(0deg)' }"
					src="/static/images/down_pie.png" mode=""></image>
				<view class="line"></view>
			</view>
			<view class="model-content-title-d" v-if="!showSelect">
				<image :src="activeTxt ? '/static/images/index/selectA.png' : '/static/images/filter.png'" mode="">
				</image>
				<text :style="{ color: activeTxt ? '#0091FF' : '#333' }">筛选</text>
			</view>
			<view class="model-content-all" v-if="showConditions && showSelect">全部项目</view>
			<view class="model-content-tags" v-if="!showConditions && showSelect">
				<view class="model-content-tags-item" v-for="(item, index) in chooseArr" :key="index"
					@click="removeItem(item, index)">
					{{ item.name }}
					<image src="/static/images/close_btn.png" mode="" v-if="!disabled"></image>
				</view>
			</view>
		</view>
		<filter-drawer :noPadding="true" :isShowDate="true" :chooseData="choosed" :filterList="filterList"
			:comfireText="comfireText" :show="showFilter" :keyMap="keyMap" ref="filter-drawer" @closed="handleClose"
			@submit="submitFilter" @handleReset="handleReset" :isShowArr="isShowArr" :orderType="6"></filter-drawer>
		<time-select v-if="selectTimePopup" :beforeToday="true" :atterToday="true" :isChooseToday="true"
			@close="closeSelectTimePopup"></time-select>
	</view>
</template>

<script>
import filterDrawer from '@/components/filter-drawer/filterDrawer.vue';
import timeSelect from '@/pages/index/components/timeSelect.vue';
import { getNowTime, removeEmpty } from '@/utils/utils.js';
export default {
	name: 'filter-model',
	components: { filterDrawer, timeSelect },
	props: {
		showSelect: {
			type: Boolean,
			default: true
		},
		disabled: {
			type: Boolean,
			default: false
		},
		all: {
			type: Boolean,
			default: true
		},
		csd: {
			type: Object,
			default: () => {
				return {};
			}
		},
		userIds: {
			type: String,
			default: ''
		},
		// 我的电梯页面用于是否显示合同类型选项
		isShowArr: {
			type: Number,
			default: 1
		},
		filterObj: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			filterList: [
				{ title: '工单申诉', key: 'appealTypeStr', list: [{ name: '可申诉', value: 1 }, { name: '不可申诉', value: 2 }] },
				{ title: '申诉状态', key: 'appealStatusStr', list: [{ name: '待申诉', value: 1 }, { name: '已申诉', value: 2 }] },
				{ title: '申诉结果', key: 'appealResultStr', list: [{ name: '待审核', value: 1 }, { name: '审核通过', value: 2 }, { name: '审核不通过', value: 3 }] },
			],
			choosed: {},
			showFilter: false,
			allChecked: true,
			chooseArr: [],
			comfireText: '确定',
			keyMap: {},
			selectTimePopup: false,
			optionKey: '',
			isChooseToday: true,
			activeTxt: false,
		};
	},
	created() {
		this.allChecked = this.all;
		this.choosed = this.csd;
		setTimeout(() => {
			this.setChooseArr();
		}, 500);
		uni.$on('getCustomerSwitch', (data, key) => {
			if (key == 'date-filter2') {
				this.beforeToday = true;
			} else {
				this.beforeToday = false;
			}
			this.optionKey = key;
			this.selectTimePopup = data;
		});
	},
	computed: {
		showConditions() {
			let flag = false;
			flag = this.allChecked || Object.keys(this.choosed).length === 0 ? true : false;
			return flag;
		}
	},
	watch: {

	},
	methods: {
		// 自定义日期
		closeSelectTimePopup(res) {
			let start = '', startR = '';
			let end = '', endR = '';
			if (res) {
				if (res.indexOf('-') != -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replaceAll('.', '-');
					end = timeArr[1].replaceAll('.', '-');
					startR = timeArr[0].replaceAll('.', '/');
					endR = timeArr[1].replaceAll('.', '/');
				} else {
					const time = res.replaceAll('.', '-');
					const timeR = res.replaceAll('.', '/');
					start = time;
					end = time;
					startR = timeR;
					endR = timeR;
				}
				const nowDay = getNowTime().replaceAll('-', '/');
				let nowtime = new Date(nowDay).getTime();
				let endtime = new Date(endR).getTime();
				console.log('自定义日期', res, nowDay, startR, endR);

				if (endtime >= nowtime && !this.beforeToday && !this.isChooseToday) {
					console.log('包含今天');
					uni.showToast({
						title: '自定义日期范围须小于今天',
						icon: 'none',
					});
					return;
				}
			}
			this.selectTimePopup = false;
			uni.$emit('closeTimeSelect', { start, end, optionKey: this.optionKey });
		},
		handleClose() {
			this.dateObj = {};
			this.allChecked = {};
			this.choosed = {};
			this.showFilter = false;
		},
		showFuc() {
			if (this.disabled) {
				return;
			}
			this.showFilter = true;
		},
		// 完成筛选
		filterd() {
			this.$emit('filterd', {
				choosed: this.choosed,
				allChecked: this.allChecked,
				dateObj: this.dateObj
			});
		},
		// 重置
		handleReset(res) {
			this.dateObj = {};
			this.allChecked = {};
			this.choosed = {};
			this.submitFilter(res);
		},
		// 保存筛选
		submitFilter(res) {
			this.keyMap = res.keyMap;
			this.allChecked = res.allChecked;
			if (res.dateObj) {
				this.dateObj = JSON.parse(JSON.stringify(res.dateObj));
			}
			if (Object.keys(res.choosed).length || (this.dateObj && this.dateObj.startTime) || (this.dateObj && this.dateObj.planBeginDate)) {
				this.activeTxt = true;
			} else {
				this.activeTxt = false;
			}
			this.choosed = res.choosed;
			this.showFilter = false;
			this.setChooseArr();
			this.filterd();
		},

		// 删除筛选item
		removeItem() {
			this.showFuc();
		},

		// 渲染已选标签
		setChooseArr() {
			if (this.allChecked) {
				this.chooseArr = [];
				return;
			}
			let arr = [];
			for (let key in this.choosed) {
				let obj = this.filterList.find((item) => {
					return item.key === key;
				});
				if (obj) {
					obj.list.forEach(e => {
						if (this.choosed[key].indexOf(e.value) != -1) {
							arr.push({
								...e,
								key
							});
						}
					});
				}
			}

			this.chooseArr = arr;
		},
		// 选择类型显示数据数量
		handlegetElevatorList() {
			// return new Promise((resolve, reject) => {
			// 	let handChanges;
			// });
		},
		// 接受tag改变以及重置的
		getResultCount() {
			// this.handleCount(res);
		},
		// 获取点击筛选条件后的数量总数	
		async handleCount(res) {
			const { allChecked, choosed } = res;
			console.log(allChecked, choosed);
			if (!allChecked && !Object.keys(choosed).length) {
				this.comfireText = '确定';
				return;
			}
			let params = {
				size: 1000,
				current: 1,
				userIds: this.userIds,
				...this.filterObj
			};
			let query = {};
			if (Object.keys(choosed).length || allChecked) {
				if (Object.keys(choosed).length) {
					const map = new Map();

					for (let key in choosed) {
						map.set(key, choosed[key]);
					}
					const obj = [...map.entries()].reduce((obj, [key, value]) => ((obj[key] = value.join(',')), obj), {});

					query = obj;
				}
				const tempList = ['buildingId', 'buildingName', 'current', 'size', 'allChecked', 'eleClassify', 'module', 'notSetPrincipal'];
				let tempParams = Object.keys(choosed).length ? { ...query, ...params } : params;
				for (let key in tempParams) {
					if (!tempList.includes(key)) {
						tempParams[key] = tempParams[key].split(',');
					}
				}

				let resultObjs = removeEmpty(tempParams);
				if (resultObjs.contractStatusT) {
					resultObjs.contractStatus = resultObjs.contractStatusT;
					delete resultObjs.contractStatusT;
				}
				if (this.filterObj.eleClassify >= 0) {
					resultObjs.eleClassify = this.filterObj.eleClassify;
				}

				let count = await this.handlegetElevatorList(resultObjs);
				if (count.total > 0) {
					this.comfireText = `查看${count.total}条数据`;
				} else {
					uni.showToast({
						icon: 'none',
						title: '筛选结果为空 请重新选择条件'
					});
					this.comfireText = '完成';
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.filter-model {
	width: 100%;

	.model-content {
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		display: flex;
		font-size: 26rpx;
		color: #333;
		padding-bottom: 20rpx;
		align-items: center;

		&-title {
			display: flex;
			font-weight: bold;
			letter-spacing: 1rpx;
			align-items: center;
			margin-right: 10rpx;

			image {
				width: 22rpx;
				height: 22rpx;
				transition: 0.3s all;
				margin: 4rpx 0rpx 0 7rpx;
			}

			.line {
				width: 2rpx;
				height: 30rpx;
				background-color: #ccc;
				margin-left: 12rpx;
			}
		}

		&-title-d {
			display: flex;
			font-weight: normal;
			letter-spacing: 1rpx;
			align-items: center;
			font-size: 26rpx;
			color: #333333;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 5rpx;
			}
		}

		&-all {
			font-size: 24rpx;
			color: #999;
			margin-left: 12rpx;
		}

		&-tags {
			flex: 1;
			display: flex;
			flex-wrap: wrap;

			&-item {
				border: 2rpx solid #cccccc;
				padding: 0 4rpx 2rpx 8rpx;
				color: #666;
				border-radius: 4rpx;
				margin: 10rpx;
				font-size: 24rpx;

				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}
}
</style>
